<template>
	<view>
		<!-- #ifdef H5 || APP-PLUS-->
		
		<view class="header-con" @tap="toRouterLink">
			<view class="header-conBox">
				<uni-icons type="search" size="15" color="#999"></uni-icons>
				<view class="textColor">净水服务</view>
			</view>
		</view>
	   	<view style="padding-top: 45px;"></view>
		
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<tabbar></tabbar>
		<!-- <view class="header-con wx">
			<view class="header-conBox header-conBoxMar">
				<uni-icons type="search" size="15" color="#999"></uni-icons>
				<view class="textColor">联城国际城</view>
			</view>
		</view>
		<view style="margin-top: 40px;"></view> -->
		<!-- #endif -->
		
		
		
		<skeleton-home :loading="loading"></skeleton-home>
		<view v-if="!loading">
			<!-- 搜索 -->
			<!-- <template>
				<diy-search></diy-search>
			</template> -->
			
			<!-- 轮播图区域 -->
			<view class="swiperCon">
				
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true" dots-styles="default">
				
				  
				  <swiper-item v-for="(item, i) in ImgList" :key="item.i" @tap="toPage()">
				  		<image :src="item.url"></image>
				  </swiper-item>
				  
				</swiper>
			</view>
			
			<!-- 公告 -->
			<view>
				<uni-notice-bar showIcon scrollable single :speed="60" :text="notice[0].data.noticeText"
					:background-color="notice[0].data.bgColor" :color="notice[0].data.color">
				</uni-notice-bar>
			</view>
			
			<!-- 微市区 -->
			<!-- <view class="tabCon">
				<view class="tab_title">
						微市区
				</view>
				<view class="tab_wsq ">
					<view class="" v-for="item in wsqData" :key="item.id">
						<view class="tab_wsqcon" @click="routerTos(item)">
							<image class="image" :src="item.imgUrl"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view> -->
			
			<view class="tabCon">
				<view class="tab_wsqshfw">
					<view class="tab_title">
						微市区
					</view>
					<view class="tabconcon">
						<view class="tab_viewCon" v-for="item in wsqData" :key="item.id" >
							<view class="tab_wsqcon"   @click="routerTos(item)">
								<image class="image" :src="item.imgUrl"></image>
								<text style="font-size: 12px;">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
	       <!-- 生活服务 -->
			<view class="tabCon">
				<view class="tab_wsqshfw">
					<view class="tab_title">
						生活服务
					</view>
					<view class="tabconcon">
						<view class="tab_viewCon" v-for="item in servicesData" :key="item.id" >
							<view class="tab_wsqcon"   @click="toRouter(item)" v-if="item.status">
								<image class="image" :src="item.imgUrl"></image>
								<text style="font-size: 12px;">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			 <!-- 广告 -->
			<view class="popular_con_bg" @tap="hxToken"></view>
			
			<view class="home-fq">
				<view class="home-fq-top">
					<text class="home-fq-topH2">今日疯抢</text>
					<text class="home-fq-topH5">优惠升级，福利多多</text>
				</view>
				<view class="home-fq-bottom">
					<view class="home-fq-bottomLeft">
						<image :src="jrfqImg" mode=""></image>
					</view>
					<view class="home-fq-bottomRight">
						<image :src="jrfqTwoImg" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="home-sx">
				<view class="home-sx-con">
					<view class="home-sx-bottomLeft home-sx-bottomStyle">
						<text class="home-fq-topH2">上新服务</text>
						<view class="home-sx-list">
							<view class="home-sx-list-li" @tap="routerLink">
								<view class="img-con">
									<image :src="jsfwImg" mode="" style="height: 126rpx;width: 64rpx;"></image>
								</view>
								<text class="textStyle">净水服务</text>
							</view>
							<view class="home-sx-list-li" @tap="routerLRLink">
								<view class="img-con">
									<image :src="lirwImg" mode="" style="height: 92rpx;width: 80rpx;"></image>
									<text class="textStyle">丽人服务</text>
								</view>
							</view>
						</view>
					</view>
					<view class="home-sx-bottomRight home-sx-bottomStyle">
						<text class="home-fq-topH2">优惠专区</text>
						<view class="home-sx-list">
							<view class="home-sx-list-li">
								<view class="img-con">
									<image :src="jsfwImg" mode="" style="height: 126rpx;width: 64rpx;"></image>
								</view>
								<text class="textStyle">净水服务</text>
							</view>
							<view class="home-sx-list-li">
								<view class="img-con">
							    	<image :src="lirwImg" mode="" style="height: 92rpx;width: 80rpx;"></image>
								</view>
								<text class="textStyle">丽人服务</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="home-ttzdj">
				<text class="home-fq-topH2">天天有福利</text>
				<view class="container">
				    <scroll-view class="scroll-view" scroll-x :scroll-with-animation="true" :scroll-left="scrollLeft"
				      @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
				      <view class="content-con">
				        <!-- 横向排列的内容 -->
				        <view v-for="(item, index) in contentList" :key="index" class="item">
				            <image class="img" :src="item" mode=""></image>
				        </view>
				      </view>
				    </scroll-view>
				  </view>
			</view>
			
			<!-- <view class="cu-load bg-gray over">
			</view> -->
		</view>

	</view>
</template>

<script>
	import {
		toJumpUrl,
	} from '@/utils/index.js';
	import config from 'config/env';
	import {
		getObj as getPageDesign
	} from '@/api/pagedesign.js';
	import {
		getPage as getSpuPage
	} from '@/api/goodsspu.js';
	import { getSkillAuthority } from '@/api/skill.js'
	import goodsList from 'components/goods-list/col-list/index';
	import goodsRowList from 'components/goods-list/row-list/index';
	import diyImage from 'components/diy-page/diy-image/index';
	import diyMagicsquare from 'components/diy-page/diy-magicsquare/index';
	import diyGoods from 'components/diy-page/diy-goods/index';
	import diyNotice from 'components/diy-page/diy-notice/index';
	import diyTabnav from 'components/diy-page/diy-tabnav/index';
	import diySearch from 'components/diy-page/diy-search/index';
	import skeletonHome from '@/components/skeleton-home/index.vue';

    import badgeMix  from '@/mixins/tabbar-badge.js'
 export default {
	mixins: [badgeMix],
		components: {
			diyImage,
			diyGoods,
			diyNotice,
			diyMagicsquare,
			diyTabnav,
			diySearch,
			goodsList,
			goodsRowList,
			skeletonHome
		},
		data() {
			return {
				userInfo: uni.getStorageSync('user_info'),
				// 横向排列内
				contentList: [`${config.imgSrcL}ttyfl-one.png`, `${config.imgSrcL}ttyfl-one.png`,`${config.imgSrcL}ttyfl-three.png`], // 内容列表
				scrollLeft: 0, // 初始滚动位置
				startX: 0, // 触摸起始坐标
				moveX: 0, // 触摸移动坐标
				diffX: 0, // 触摸移动距离
				isMoving: false, // 是否处于滑动状态
				//生活服务
				jsfwImg:`${config.imgSrcL}jsfwzj.png`,
				lirwImg:`${config.imgSrcL}lrfqzj.png`,
				jrfqImg:`${config.imgSrcL}jrfq-one.png`,
				jrfqTwoImg:`${config.imgSrcL}jrfq-two.png`,
				permissionsStatus:false,   //工单权限
				servicesData:[
					 {
						id: 0,
						name:"净水服务",
						url:'/pages/home/home',
						imgUrl:`${config.imgSrcL}1.png`,
						status:true,
					 },
					 {
						id: 2,
						name:"丽人服务",
						url:'/pages/cate/cate',
						imgUrl:`${config.imgSrcL}8.png`,
						status:true,
					 },
					 // {
						// id: 3,
						// name:"技能认证",
						// url:'subpkg/skill/skillIndex/skillIndex',
						// imgUrl:"/static/image/ico/jnrz.png"
					 // },
					 {
						id: 3,
						name:"工作服务",
						url:'subpkg/skill/skillIndex/skillIndex',
						imgUrl:`${config.imgSrcL}2.png`,
						status:false
					 }
				],
			   // 1. 轮播图的数据列表，默认为空数组
				ImgList: '',
				wsqData : [
					{
						id: 0,
						name:"信息公开",
						url:'/pages/home/home',
						imgUrl:`${config.imgSrcL}14.png`
					},
					{
						id: 1,
						name:"物业缴费",
						url:'/pages/cart/cart',
						imgUrl:`${config.imgSrcL}15.png`
					},
					{
						id: 2,
						name:"访客管理",
						url:'/pages/cate/cate',
						imgUrl:`${config.imgSrcL}16.png`
					},
					{
						id: 3,
						name:"设备管理",
						url:'/pages/my/my',
						imgUrl:`${config.imgSrcL}17.png`
					}
				],
				loading: true,
				tabCur: 0,
				theme: getApp().globalData.theme, //主题
				showDefultPage: false, // 是否显示默认样式
				hotGoodsList: [], // 热销商品
				newGoodsList: [], // 最新商品
				pageDesign: {
					pageName: '首页'
				},
				imgList : [], //轮播图
				notice : []
			};
		},
		onLoad(props) {
			getApp()
				.initPage({
					isTabar: true,
					scene: props.scene
				})
				.then(res => {
					this.getPageDesign();
				});
				
			// console.log(config.imgSrcL)
			// console.log(this.userInfo)
		
		},
		onShow(){
			// this.getUserInfo();
			this.getSkillAuthorityList(this.userInfo.id)
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading();
			this.getPageDesign();
			// 停止下拉动作
			uni.hideNavigationBarLoading();
			// 停止当前页面的下拉刷
			uni.stopPullDownRefresh();
		},
		// onShow() {
		// 	uni.setTabBarBadge({
		// 		index: 2,
		// 		text: getApp().globalData.shoppingCartCount + ""
		// 	})
		// },
		methods: {
			handleTouchStart(e) {
			  this.startX = e.changedTouches[0].clientX;
			  this.isMoving = true;
			},
			handleTouchMove(e) {
			  if (this.isMoving) {
				this.moveX = e.changedTouches[0].clientX;
				this.diffX = this.moveX - this.startX;
				this.scrollLeft -= this.diffX;
				this.startX = this.moveX;
			  }
			},
			handleTouchEnd() {
			  this.isMoving = false;
			},
			routerLRLink(){
				uni.navigateTo({
					url:'/subpkg/beauty/beautyIndex/beautyIndex'
				})
			},
			hxToken() {
			  const hxToken = uni.getStorageSync('hx-token'); 
			  // 获取本地存储中的 hx-token
			  if (!hxToken) { // 如果 hx-token 不存在，则跳转到登录页面
			    uni.navigateTo({
			      url: '/pages/login/index'
			    });
			  }
			},
			 // 点击跳转到商品详情页面
			 gotoDetail(item) {
				 uni.navigateTo({
				
				   // url: '/pages/goodsdetail/goodsdetail?goods_id=' + item.goods_id
				   url: ' /subpkg/goods/goods-list/index'
				 })
			 },
			 routerLink(){
				 uni.navigateTo({
				   	url:`/subpkg/goods/goods-detail/index?id=1496390644407762945`
				 })
			 },
			 routerTos(item){
				const { name } = item
				if( name === '信息公开' || name === '物业缴费' || name === '访客管理' || name === '设备管理'){
							 
							uni.$showMsg('功能开发中')
							// uni.navigateTo({
							// 	url:'/subpkg/map/map/map'
							// })
				}
			 },
			 toRouter(item){
				 const { name } = item
				 if( name === '家政服务' || name === '设备购买' || name === '管理数据' || name === '教育服务'){
					 
					
					 
					uni.$showMsg('功能开发中')
					
				 }else if (name === '净水服务'){
					 
					 uni.navigateTo({
						// url: '/pages/goods/goods-list/index'
							url:`/subpkg/goods/goods-detail/index?id=1496390644407762945`
					 })
					 
				 }else if (name === '丽人服务'){
					 uni.navigateTo({
					 	url:'/subpkg/beauty/beautyIndex/beautyIndex'
					 })
					 
				 }else if (name === '技能认证'){
					 uni.navigateTo({
					 	url:'/subpkg/skill/skillIndex/skillIndex'
					 })
				 }else if(name === '工作服务'){
					 uni.navigateTo({
					 	url:'/subpkg/skill/workServices/workServices'
					 })
				 }
			 },
			toRouterLink(){
				 uni.navigateTo({
				 	url:'/subpkg/goods/goods-newsearch/goods-newsearch'
				 })
			},
			toPage(jumpUrl) {
				toJumpUrl(jumpUrl);
			},
			getPageDesign() {
				this.loading = true;
				getPageDesign().then(response => {
					this.loading = false;
					if (response.data) {
						this.pageDesign = response.data;
						this.ImgList = response.data.pageContent.componentsList.filter(item => item.name === "image")[0].data.imageList
						this.notice = response.data.pageContent.componentsList.filter(item => item.name === "notice")
						// console.log(this.pageDesign)
						// console.log(this.ImgList)
						// console.log()
					} else {
						this.getData();
					}
				})
			},
			getData() {
				this.showDefultPage = true;
				this.getHotGoodsList();
				this.getNewGoodsList();
			},
			/**
			 * 获取热销商品
			 */
			getHotGoodsList() {
				getSpuPage({
						current: 1,
						size: 4,
						descs: 'sales_volume',
					})
					.then(res => {
						this.hotGoodsList = res.data.records;

					});
			},
			/**
			 * 获取最新商品
			 */
			getNewGoodsList() {
				getSpuPage({
						current: 1,
						size: 4,
						descs: 'create_time',
					})
					.then(res => {
						this.newGoodsList = res.data.records;
					});
			},
			
			async getSkillAuthorityList(id) {
				console.log(this.userInfo)
				const { data } = await getSkillAuthority(id)
				console.log(data)
				this.servicesData[2].status = data
			}

		}
	};
</script>
<style lang="scss">
	page{
		background-color: #f1f1f1;
		padding-bottom: 2px;
	}
	.header-con{
		background-color: rgba(248, 248, 248, 1);
		padding: 10px 0;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 9999;
	}
	.header-conBox{
		height: 30px;
		color: rgba(153, 153, 153, 1);
		line-height:30px;
		border: 1px solid #ededed;
		width: 90%;
		margin: 0 auto;
		padding:0 10px;
		text-align: center;
		display: flex;
		font-size: 12px;
		letter-spacing: 1px;
		border-radius: 15px;
		background-color: rgba(250, 250, 250, 1);
		border: 1px solid rgba(255, 0, 0, 0);
		box-shadow: 1px 2px 15px 0px rgba(0, 0, 0, 0.1);
		.textColor{
			color: #999;
			margin-left: 10px;
		}
	}
	.wx{
		height: 90px;
	}
	.header-conBoxMar{
		margin-top: 40px;
	}
	
	.bgLiner{
		background: #fff;
		color: #000;
	}
	.img-con{
		width: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.home-ttzdj{
		width: 100%;
		margin: 0 auto 15px;
		background-color: #fff;
		padding: 10px 15px 0px 10px;
		border-radius: 8rpx;
		box-shadow: 0rpx 8rpx 25rpx 0rpx rgba(172,172,172,0.14);
	}
	.home-sx{
		width: 100%;
		margin: 0 auto 10px;
	}
	.home-sx-con{
		display: flex;
		justify-content: space-between;
	}
	.home-sx-bottomStyle{
		background: linear-gradient(to bottom right, #fdeaec, #ffffff);
		width: 48%;
		padding: 10px 10px 0;
		border-radius: 8rpx;
		text{
			letter-spacing: 1px;
		}
	}
	.home-sx-bottomRight{
		background: linear-gradient(to bottom right, #fdefe3, #ffffff);
	}
	.home-sx-list{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.home-sx-list-li{
			padding:10px 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.textStyle{
			color: #999;
			margin-top: 10px;
			font-size: 12px;
		}
		image{
			width: 40px;
			height: 80px;
		}
	}
	.home-fq-bottom{
		display: flex;
		justify-content: space-between;
	}
	.home-fq-bottomLeft{
		width: 47%;
		image{
			height: 195rpx;
			border-radius: 8px;
		}
	}
	.home-fq-bottomRight{
		width: 47%;
		image{
			height: 195rpx;
			border-radius: 5px;
		}
	}
	.home-fq{
		width: 100%;
		margin: 0 auto;
		background: #fff;
		box-shadow: 0rpx 8rpx 25rpx 0rpx rgba(172,172,172,0.14);
		border-radius: 8rpx;
		padding: 10px;
		margin-bottom: 10px;
	}
	.home-fq-top{
		color: #fff;
		margin-bottom: 15px;
	}
	.home-fq-topH2{
		font-size: 15px;
		font-weight: bold;
		letter-spacing: 1px;
		color: #333;
	}
	.home-fq-topH5{
		font-size: 12px;
		margin-left: 8px;
		color: #333;
	}
	.popular_con_bg{
		width: 100%;
		height:79px;
		background: url('#{$global-url-prefix}tuijian.png') no-repeat;
		background-size: 100% 79px;
		margin-bottom: 5px;
	}
	.swiper-item {
		height: 150px !important;
		border-radius: 8px !important;
	}

	.screen-swiper {
		min-height: 150px !important;
	}
	.swiper-bg {
		width: 100vw;
		height: 140px;
		border-radius: 0 0 50px 50px;
	}
	.popular_con_list{
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	padding: 30rpx 20rpx;
	.popular_con_li{
		width: 48%;
		margin-top: 15px;
		margin-right: 4%;
		padding: 15px;
		font-size: 13px;
		color: #333;
		&:nth-child(even) {
		  /* 不要某个属性 */
		   margin-right: 0%;
		}
		.textCantiner{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.textTitle{
				color: #333;
				font-size: 14px;
			}
			.textCon{
				font-size: 12px;
				color: #999;
				margin-top: 10px;
			}
			.textPrice{
				color: #dd6161;
			}
		}
		.image{
			width: 100%;
			height: 150px;
		}
		
	}
}
.popular_con{
	.popular_con_bg{
		width: 100%;
		height: 79px;
		// background: url('../../static/img/热门推荐.png') no-repeat;
		background-size: cover;
	}
}

.tab_wsq {
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 25rpx 0rpx rgba(172,172,172,0.14);
	border-radius: 18rpx;
	width: 93%;
	margin: 0 auto;
	padding: 0px 5px;
	}
.advertisement{
	.image{
		width: 100%;
		height: 150rpx;
	}
}
.tab_viewCon{
	flex:  0 0 25%;
}
.tab_wsqshfw{
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 25rpx 0rpx rgba(172,172,172,0.14);
	border-radius: 18rpx;
	font-size: 13px;
	width:100%;
	margin: 0 auto 5px;
	padding: 10px 0;
	.tabconcon{
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: 0 auto;
	}
	.tab_wsqcon{
		display: flex;
		flex-direction: column;
		align-items: center;
		outline: none;
		color: #333;
		.image{
			margin-bottom: 20rpx;
			width: 28px;
			height: 28px;
		}
	}
	
}

.tab_title{
	color: rgba(53, 53, 53, 1);
	padding-left: 10rpx;
	border-left: 3px solid #FBC87D;
	width: 93%;
	margin: 0 auto 10px;
	font-size: 12px;
}
.tab_wsq{
	display: flex;
	justify-content: space-around;
	.tab_wsqcon{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		outline: none;
		color: #333;
		font-size: 12px;
		.image{
			margin-bottom: 20rpx;
			width: 24px;
			height: 24px;
		}
	}
}

swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}



.container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 15px;
}

.scroll-view {
  white-space: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* 隐藏滚动条 for Firefox */
  -ms-overflow-style: none; /* 隐藏滚动条 for Internet Explorer and Edge */

  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 for Chrome, Safari, and Opera */
  }
}

.content-con{
  display: flex;
  padding: 10px 0;
}

.item {
  flex-shrink: 0;
  width: 240.23rpx;
  height: 158.2rpx;
  background-color: #f1f1f1;
  margin-right: 10px;
  .img{
	width: 100%;
	height: 158.2rpx;
	border-radius: 8px;
  }
}
</style>
